<template>
  <view class="shopping">
    <view class="navtive_head">
      <view class="hidden">返回</view>
      <text class="title"> 购物车 </text>
      <text class="del"> 删除 </text>
    </view>
    <!-- 滚动部分 -->
    <view class="over_view">
      <scroll-view style="height: 100%" scroll-y @scrolltolower="loadMore">
        <view class="commodity_list">
          <Empty v-if="!shoopingList.length"></Empty>
          <template v-else>
            <view class="list_view">
              <Commodity
                v-for="item in shoopingList"
                :key="item.id"
              ></Commodity>
            </view>
          </template>
        </view>
        <view class="recommend_view">
          <view class="recommend_head">
            <image
              style="width: 56rpx; height: 40rpx"
              src="@/static/icon/t_left.png"
              mode="aspectFill"
            />
            <text class="title"> 为你推荐 </text>
            <image
              style="width: 56rpx; height: 40rpx"
              src="@/static/icon/t_right.png"
              mode="aspectFill"
            />
          </view>
          <view class="goods_list">
            <GoodsItem v-for="item in 10"></GoodsItem>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="select_all_view">
      <view class="checkout_box">
        <Checkout></Checkout> <text class="text">全选</text>
      </view>
      <view class="total_view">
        <view class="total_text">
          <text class="text">合计:</text>
          <text class="price"> $399 </text>
        </view>
        <up-button
          class="u_button"
          :hairline="false"
          color="#eb5757"
          text="去结算"
          shape="circle"
        ></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import Empty from "./component/Empty.vue";
import Commodity from "./component/Commodity.vue";
import GoodsItem from "./component/Goods.vue";
import Checkout from "@/component/Checkout.vue";

const shoopingList = ref([
  {
    id: 1,
    name: "zxcƒ",
  },
  {
    id: 2,
    name: "zxcƒ",
  },
]);

function loadMore() {
  console.log("加载更多");
}
</script>

<style lang="scss" scoped>
.shopping {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  .select_all_view {
    height: 100rpx;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: var(--window-bottom,0);
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    .total_view {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .u_button {
        padding: 20rpx 44rpx;
        line-height: 1;
      }
      .total_text {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
        margin-right: 28rpx;

        .text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          white-space: nowrap;
          margin-right: 10rpx;
        }
        .price {
          font-weight: 500;
          font-size: 30rpx;
          color: #eb5757;
          line-height: 1;
        }
      }
    }
    .checkout_box {
      display: flex;
      align-items: center;

      .text {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 1;
        margin-left: 10rpx;
      }
    }
  }
  .navtive_head {
    height: 88rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .hidden {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 33rpx;
      opacity: 0;
    }
    .title {
      font-weight: 500;
      font-size: 36rpx;
      color: #01000d;
      line-height: 42rpx;
    }
    .del {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 33rpx;
    }
  } 
  .over_view {
    flex: 1 0 auto;
    height: 0;
    overflow: hidden;
  }
  .recommend_view {
    overflow: hidden;
    padding-top: 50rpx;
    padding-bottom: 50px;
    .goods_list {
      padding: 0 30rpx;
      // display: grid;
      // grid-template-columns: 1fr 1fr;
      align-items: flex-start;
      column-gap: 22rpx;
      column-count: 2;
    }
    .recommend_head {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 56rpx;

      .title {
        font-weight: 500;
        font-size: 36rpx;
        color: #01000d;
        line-height: 42rpx;
        margin: 0 24rpx;
      }
    }
  }
  .commodity_list {
    padding: 20rpx 30rpx 0;

    .list_view {
      width: 100%;
      background: #ffffff;
      border-radius: 8rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      padding: 30rpx 24rpx;
    }
  }
}
</style>
